<template>
  <div class="report-page">
    <div
      class="chat-container"
      ref="chatContainerRef"
      @scroll="scrollEvent"
      :style="{ height: showList ? '100vh' : 'calc(100vh - 245px)' }"
    >
      <div class="version-container" v-if="showList">
        <div class="version" @click="viewFn">
          <div><img class="version-img" src="../../assets/chat/logo.png" alt="" /></div>
          <div class="version-text">百昌师爷大模型2.0 <span class="gongce">公测</span></div>
        </div>
      </div>
      <QuestionExample
        title="百昌师爷AI：智能风控，不良资产处置的智慧之选"
        subTitle="智驭金融，百昌师爷AI携手DeepSeek重塑不良资产处置生态"
        :isQuestion="false"
        @generateReport="generateReport"
        :showList="showList"
        ref="questionExampleRef"
      />
      <ReportInput
        ref="indexInputRef"
        :isIndex="true"
        :isLoading="false"
        :platform="platform"
        @generateReport="generateReport"
        @setTabActive="setListActive"
        @changeShowList="changeShowList"
        @setCompany="setCompany"
        @setAddress="setAddress"
        @setKefu="setKefu"
        @setZhuanjia="setZhuanjia"
        @changeIsRolling="changeIsRolling"
        v-if="showList"
      />
      <div v-for="(item, index) in chatList" :key="index" class="chat-list-container">
        <div class="chat-item" :class="item.type === 'user' ? 'user' : 'ai'">
          <div v-if="item.type === 'user'" class="question">
            <div class="message" v-if="item.message && item.message.length > 0">{{ item.message[0] }}</div>
            <img class="avatar" src="../../assets/chat/userAvatar.png" alt="" />
          </div>
          <div v-else-if="item.type === 'ai'">
            <div v-if="item.message.length > 0 || item.isLoading" class="answer-container">
              <div class="answer">
                <div class="avatar-page">
                  <div><img class="avatar" src="../../assets/chat/aiAvatar.png" alt="" /></div>
                  <div class="page-container" v-if="item.message.length > 1">
                    <span class="pre-page" @click="preFn(index, item.answerIndex)">&lt;</span
                    >{{ item.answerIndex + 1 }} / {{ item.message.length
                    }}<span class="next-page" @click="nextFn(index, item.answerIndex)">&gt;</span>
                  </div>
                </div>

                <div class="answer-message">
                  <div v-if="item.isLoading" class="markdown-body">
                    <!-- <div v-html="currentHTML" class="markdown-body" /> -->
                    <div>
                      <h4>师爷模型深度思考中...</h4>
                      <div
                        style="
                          color: gray;
                          font-size: 14px;
                          padding-left: 10px;
                          margin-bottom: 10px;
                          line-height: 25px;
                          border-left: 1px solid #e5e5e5;
                        "
                      >
                        {{ currentThinkHTML }}
                      </div>
                    </div>
                    <div v-html="currentAnswerHTML"></div>
                  </div>
                  <div v-else class="markdown-body">
                    <!-- <div v-html="item.message[item.answerIndex]" class="markdown-body" /> -->
                    <div v-if="item.message[item.answerIndex] === '服务器忙，请稍后再试。'">
                      {{ item.message[item.answerIndex] }}
                    </div>
                    <div v-else>
                      <div>
                        <h4>
                          师爷模型已深度思考
                          <el-icon
                            style="vertical-align: middle; cursor: pointer"
                            v-if="!item.showThinkList[item.answerIndex]"
                            @click="showThinkFn(index, item.answerIndex)"
                          >
                            <ArrowDown />
                          </el-icon>
                          <el-icon
                            style="vertical-align: middle; cursor: pointer"
                            v-else
                            @click="hideThinkFn(index, item.answerIndex)"
                          >
                            <ArrowUp />
                          </el-icon>
                        </h4>
                        <div
                          v-show="item.showThinkList[item.answerIndex]"
                          style="
                            color: gray;
                            font-size: 14px;
                            padding-left: 10px;
                            margin-bottom: 10px;
                            line-height: 25px;
                            border-left: 1px solid #e5e5e5;
                          "
                        >
                          {{ item.thinkList[item.answerIndex] }}
                        </div>
                      </div>
                      <div class="answerStr" v-html="item.answerList[item.answerIndex]"></div>

                      <div v-if="item.reportUrl">
                        <el-button @click="downloadReport(item.reportUrl)" class="download-btn">
                          <SvgIcon class="icon-img" name="download" />
                          下载尽调报告</el-button
                        >
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="btn-container">
                <div class="opt-container">
                  <div v-if="index === chatList.length - 1">
                    <!-- <span v-if="item.isLoading" class="stop-btn" @click="stopFn">停止生成</span> -->
                    <span v-if="!item.isLoading && preInputValue" class="regenerate-btn" @click="regenerateFn"
                      >重新生成</span
                    >
                  </div>
                </div>
                <div class="tool-container" v-if="!item.isLoading">
                  <el-icon
                    class="copy"
                    :class="copyIndex === index ? 'copy-acive' : ''"
                    @click="copyFn(index, item.answerIndex)"
                    :data-clipboard-text="copyText"
                  >
                    <CopyDocument />
                  </el-icon>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="loading-status" v-if="loadingStatus">
        <div><img class="avatar" src="../../assets/chat/aiAvatar.png" alt="" /></div>
        <div class="think">思考中…</div>
        <div><img class="loading-img" src="../../assets/chat/loading.gif" alt="" /></div>
      </div>
      <div v-if="!isLoading">
        <div class="scroll-container scroll-top" v-if="scrollTopShow">
          <el-icon style="vertical-align: middle" @click="scrollTopFn">
            <ArrowUp />
          </el-icon>
        </div>
        <div class="scroll-container scroll-bottom" v-else-if="scrollBottomShow">
          <el-icon style="vertical-align: middle" @click="scrollBottomFn">
            <ArrowDown />
          </el-icon>
        </div>
      </div>
    </div>
    <div class="input-container" v-if="!showList">
      <ReportInput
        ref="listInputRef"
        :isIndex="false"
        :isLoading="isLoading"
        :loadingStatus="loadingStatus"
        :platform="platform"
        @stopFn="stopFn"
        @generateReport="generateReport"
        @setCompany="setCompany"
        @setAddress="setAddress"
        @setKefu="setKefu"
        @setZhuanjia="setZhuanjia"
        @changeIsRolling="changeIsRolling"
      />
      <Agreement />
    </div>
    <ViewDialog ref="viewDialogRef" />
    <FirstDialog ref="firstDialogRef" @setTabActive="setIndexActive" />
  </div>
</template>
<script lang="ts" src="./index.ts"></script>
